<template>
  <div>
    <el-form :model="form" label-position="left">
      <div class="info_l">
        <div class="info_l_head">
          <div>个人基本资料</div>
          <el-divider></el-divider>
        </div>
        <div>
          <div class="info_sel">
            <div class="info_sel_l">
              <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="年龄" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="籍贯" :label-width="formLabelWidth">
                <el-select
                    class="form_select"
                    v-model="form.region"
                    placeholder="请选择籍贯"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="婚姻状况">
                <el-radio-group v-model="form.type">
                  <el-radio class="info_sel_r_groupn" label="已婚"/>
                  >
                  <el-radio class="" label="未婚" name="1"/>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="info_sel_butn">
              <el-form-item label="性别">
                <el-radio-group v-model="form.type">
                  <el-radio class="info_sel_r_groupn" label="男"/>
                  >
                  <el-radio class="" label="女" name="1"/>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="出生日期" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="民族" :label-width="formLabelWidth">
                <el-select
                    class="form_select"
                    v-model="form.region"
                    placeholder="请选择民族"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </div>
            <div class="info_sel_butn">
              <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
              >
                <img
                    class="info_sel_r_img"
                    src="../../assets/img/img.jpg"
                    alt=""
                />
              </el-upload>
            </div>
          </div>

          <div class="info_sel">
            <div class="info_sel_l">
              <el-form-item label="身份证号" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </div>
            <div class="info_sel_s">
              <el-form-item label="个人编号" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="现居地址" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="工作单位" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <div class="info_sel">
            <div class="info_sel_l">
              <el-form-item label="文化程度" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </div>
            <div class="info_sel_s">
              <el-form-item label="职务" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="既往病史" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item label="家族史" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>

          <!-- <el-form-item label="编辑时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="value3"
              type="datetime"
              placeholder="选择日期时间"
              default-time="12:00:00">
            </el-date-picker>
          </el-form-item> -->
        </div>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default {
  data() {
    return {
      dialogFormVisible: true,
      form: {},
      formLabelWidth: '80px',
      formInline: {},
    }
  }

}
</script>

<style scoped>

.info_l {
  text-align: left;
  flex: 1;
  width: 700px;
}

.info_l_input {
  /* width: 82%; */
}

.info_l_button {
  margin-left: 10px;
}

.info_sel_r_groupn {
  margin-left: 40px;
}

.info_sel {
  display: flex;
  width: 700px;
}

.info_sel_l {
  width: 50%;
}

.info_sel_r {
  width: 50%;
  margin-left: 50px;
}

.info_sel_r_img {
  width: 180px;
  height: 220px;
  margin: 0px auto;
}

.avatar-uploader {
  margin: 0px auto;
  text-align: center;
}

.info_l /deep/ .el-select {
  width: 100%;
}

.info_l_head {
}

.pagination {
  text-align: center;
}

.top_dialog /deep/ .el-dialog {
  margin-top: 5vh !important;
}

.photog {
  width: 600px;
  height: 400px;
}

.info_sel_s_butn {
  margin: 0px auto;
}

.info_sel_butn {
  margin-left: 20px;
}

.info_sel_s {
  margin-left: 20px;
  width: 50%;

}

.add_info .el-divider--horizontal {
  margin-top: 10px;
}
</style>